﻿@model IEnumerable<OPM.Models.GetKnowledgeDetail>
@using OPM.Class;
@using System.Web.Mvc;
@{
    Layout = null;
 }

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>@Multi.OPMTitle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" sizes="57x57" href="~/icon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="~/icon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="~/icon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="~/icon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="~/icon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="~/icon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="~/icon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="~/icon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="~/icon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="~/icon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="~/icon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="~/icon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="~/icon/favicon-16x16.png">
    <link rel="manifest" href="~/icon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="icon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" type="text/css" href="~/css/resetcss.css">
    <link rel="stylesheet" type="text/css" href="~/css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="~/css/style.css">
    <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>if (!window.jQuery) document.write(unescape('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script>if (!window.jQuery.ui) document.write(unescape('%3Cscript src="js/jquery-ui.min.js"%3E%3C/script%3E'))</script>
    <link rel="stylesheet" type="text/css" href="~/js/colorbox-master/colorbox.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
    <script src="~/js/colorbox-master/jquery.colorbox-min.js"></script>
    <script src="~/js/jquery.timeago.js"></script>
    <script src="~/js/knowledge.js"></script>
</head>

<body>

    <div class="container w100p">
        @Html.Partial("_LayoutHeader")
        @Html.Partial("_LayoutMenu")
        <div class="body_content floatL">
            <div class="tab_new_topic">
                <div class="mobile_menu floatL dNone" onclick="SlideMenu(1);"></div>
                <div class="new_topic_btn floatL" id="new_topic_btn4">@Multi.information</div>
                <div class="new_topic_btn floatR" id="new_topic_btn3"><a href="service.html">@Multi.NewSubject</a></div>
                <div class="clear"></div>
            </div>
            <div class="titleTab knowledge_tab">
                <div class="titleTab_knowledge ">
                    @Multi.information_title
                </div>
            </div>

            <div class="timeLineBox knowledgeBoxFull">
                @foreach (dynamic list in ViewBag.knowlengedetail)
                { 
                    <div class="knowledge-Title">
                        <p>@list.title_th </p>
                        <time class="timeago" datetime="2015-04-16T12:52:17Z">
                            @list.ShowDateTime
                        </time>
                        <!-- ใช้แบบ iso 8601 -->
                    </div>

                    <div class="timeline-action p-Absolute" onclick="openActionBox('1');"></div>
@*<div class="timeline-action-box dNone p-Absolute">
                    <div class="timeline-action-box1"><a href="#">แก้ไข</a></div>
                    <div class="timeline-action-box2"><a href="#">ประสานงาน</a></div>
                    <div class="timeline-action-box3"><a href="#">รายงานผล</a></div>
                    <div class="timeline-action-box4"><a href="#">ประชาชนติดตาม</a></div>
                </div>*@
                    <div class="knowledge-Detail">
                        @Html.Raw(list.detail_th)
                    </div>
                    <div class="knowledge-more dNone" onclick="openMoreBox('1');">@Multi.ReadMore</div>
@*<div class="knowledge-image">
                        <a href="#" onclick="colorboxopen($(this).attr('href')); return false;">
                            <img src="@list.picture" alt="" />
                        </a>
                    </div>*@
                    <div class="timeline-Comment">
                        <div class="smile_tab">@list.smile</div>
                    </div>
                }

                @foreach (var r in ViewBag.commentDetail)
                {
                    
                    <!-- start loop -->
                    <div class="timeline-Comment2">
                        <div class="floatL timeline-Comment-Avatar">
                            <img src="~/images/icon-avatar.png" alt="" />
                        </div>
                       
                        <div class="timeline-Comment-Text" id="@r.boxId">
                            <p>@r.created_by_text</p>
                            <p class="textcomment">@r.comment_text</p>
                            <input type="text" name="Commenteditbox" value="" class="Commenteditbox dNone" data-id="@r.id" />
                            <input type="hidden" name="ref_id" value="@r.ref_id" id ="ref_id" />
                            <time class="timeago" datetime="2015-04-16T12:52:17Z">@r.ShowDateTime</time>
                            <span onclick="editbox('@r.id');">| @Multi.edit_comment</span>
                        </div>
                        <div class="clear"></div>
                    </div>
                }
                <!-- end loop -->
                @foreach (var q in ViewBag.knowlengedetail)
                { 
                    <div class="timeline-Comment2">
                        <div class="floatL timeline-Comment-Avatar">
                            <img src="~/images/icon-avatar.png" alt="" />
                        </div>
                        <div class="timeline-Comment-Text">
                            <textarea name="comment" id="comment" placeholder="@Multi.enter_comment"></textarea>
                            <input type="hidden" name="content_id" id="content_id" value="@q.id" />
                        </div>
                        <div class="clear"></div>
                    </div>
                }
            </div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="dNone">
        <div id="inline_content">
            <div class="SaveSuccess">
                <div class="SaveSuccessTab1">@Multi.success</div>
                <div class="SaveSuccessTab3" onclick="$.colorbox.close();">@Multi.finish</div>
            </div>
        </div>
    </div>


    <script>

        $(document).ready(function () {
            $("#comment").keyup(function (event) { // เมื่อพิมพ์คำค้นหาในกล่องค้นหา  
                if (event.keyCode == 13) {

                    var content_id = $("#content_id").val();
                    var comment = $("#comment").val();
                   
                    //var ref_id = $("#ref_id").val();

                    //var data = JSON.stringify({ id: id, comment: comment, ref_id: ref_id });
                    //$.post("../../Information/AddKnowledgeComment", { func: data }, function (data) {
                    //    console.log(data.id);
                    //    console.log(data.comment);
                    //    console.log(data.content_id);
                    //}, "json");

                    $.ajax({
                        type: 'get',
                        dataType: 'json',
                        cache: false,
                        url: '/Information/AddKnowledgeComment',
                        data: { content_id: content_id, comment: comment, ref_id: "" },
                        success: function (response, textStatus, jqXHR) {
                            savedataform();
                            location.reload();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert('Error - ' + errorThrown);
                        }
                    });
                }
            });
            
            $(".Commenteditbox").keyup(function (event) { // เมื่อพิมพ์คำค้นหาในกล่องค้นหา  
                if (event.keyCode == 13) {
                    var id = $(this).attr('data-id');
                    var str = $("#BoxId_" + id).find('.Commenteditbox').val();
                    var content_id = $("#content_id").val();
                    var ref_id = $("#ref_id").val();

                    $.ajax({
                        type: 'get',
                        dataType: 'json',
                        cache: false,
                        url: '/Information/EditComment',
                        data: { id: id, comment: str, content_id: content_id, ref_id: ref_id },
                        success: function (response, textStatus, jqXHR) {
                            savedataform();
                            location.reload();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert('Error - ' + errorThrown);
                        }
                    });

                }
            });

        });

        function savedataform() {
            $.colorbox({
                inline: true,
                width: "50%",
                href: "#inline_content",
                fastIframe: false,
                onClosed: function () {
                    $("#comment").val('');
                }
            });
        }
        function editbox(id) {
            var box = $("#BoxId_" + id).find('.textcomment');
            var str = box.text();
                      box.hide();
            $("#BoxId_" + id).find('.Commenteditbox').val(str).css('display', 'block').focus();
        }
    </script>

    <style>
        #cboxLoadedContent
        {
            background-color: #fff !important;
        }
        .Commenteditbox
        {    
            font-size: 1em;
            height: 28px;
            padding: 0 2px;
            width: 90%;
        }
    </style>
</body>
</html>

